<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div fxLayout="row">
  <div fxFlex="70">
    <form (keydown.enter)="false" (ngSubmit)="patch();">
      <div class="gv-form-section">
        <div class="gv-form-section-title">
          <h5>Tokens</h5>
          <mat-divider></mat-divider>
        </div>

        <div fxLayout="column">
          <div fxLayout="row" fxLayoutGap="10px">
            <mat-form-field appearance="outline" floatLabel="always" fxFlex="32">
              <mat-icon matPrefix>timer</mat-icon>
              <input matInput type="number" placeholder="Access token validity" name="accessTokenValidity" min="0" (ngModelChange)="modelChanged($event)" [(ngModel)]="applicationOauthSettings.accessTokenValiditySeconds" [disabled]="readonly" />
              <mat-hint>Expiration of the Access tokens (seconds).</mat-hint>
            </mat-form-field>
            <mat-form-field appearance="outline" floatLabel="always" fxFlex="32">
              <mat-icon matPrefix>timer</mat-icon>
              <input matInput type="number" placeholder="Refresh token validity" name="refreshTokenValidity" min="0" (ngModelChange)="modelChanged($event)" [(ngModel)]="applicationOauthSettings.refreshTokenValiditySeconds" [disabled]="readonly" />
              <mat-hint>Expiration of the Refresh tokens (seconds).</mat-hint>
            </mat-form-field>
            <mat-form-field appearance="outline" floatLabel="always" fxFlex="32">
              <mat-icon matPrefix>timer</mat-icon>
              <input matInput type="number" placeholder="ID token validity" name="idTokenValidity" min="0" (ngModelChange)="modelChanged($event)" [(ngModel)]="applicationOauthSettings.idTokenValiditySeconds" [disabled]="readonly" />
              <mat-hint>Expiration of the ID tokens (seconds).</mat-hint>
            </mat-form-field>
          </div>
        </div>
      </div>

      <div class="gv-form-section">
        <div class="gv-form-section-title">
          <div fxLayout="row" style="align-items: center;">
            <h5 style="margin: 0;">Custom claims</h5>
            <button mat-icon-button (click)="openDialog($event)"><mat-icon>info_outline</mat-icon></button>
          </div>
          <small>You can add custom claims to the tokens (ID Token and Access Token) by picking attributes from the execution context.</small>
          <mat-divider></mat-divider>
        </div>
        <div class="token-custom-claims">
          <app-create-claim *ngIf="!readonly" (addClaimChange)="addClaim($event)"></app-create-claim>
          <p *ngIf="!claimsIsEmpty() && !readonly"><small><i>Double click to edit and press enter to save changes</i></small></p>
          <ngx-datatable #claimsTable class="material"
                         [columnMode]="'flex'"
                         [headerHeight]="40"
                         [footerHeight]="40"
                         [rowHeight]="55"
                         [messages]="{emptyMessage:'There is no custom claims'}"
                         [rows]='applicationOauthSettings.tokenCustomClaims'
                         [groupRowsBy]="'tokenType'"
                         [groupExpansionDefault]="true">
            <!-- Group Header Template -->
            <ngx-datatable-group-header [rowHeight]="50">
              <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
                <div style="padding:5px;">
                  <a
                    href="javascript:void(0);" style="color: grey; text-decoration: none; font-size: 14px;"
                    [class.datatable-icon-right]="!expanded"
                    [class.datatable-icon-down]="expanded"
                    title="Expand/Collapse Group"
                    (click)="toggleExpandGroup(group)">
                    {{ group.value[0].tokenType | uppercase }}
                  </a>
                </div>
              </ng-template>
            </ngx-datatable-group-header>

            <ngx-datatable-column name="Claims" [flexGrow]="2">
              <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
                <span (dblclick)="editing[row.id + '-claimName'] = true" *ngIf="!editing[row.id + '-claimName']">
                  {{row.claimName}}
                </span>
                <mat-form-field *ngIf="editing[row.id + '-claimName']" class="datatable-input">
                  <input matInput type="text" required autofocus placeholder="Claim name"
                         (keyup.enter)="updateClaim(row.tokenType, $event, 'claimName', row.id)"
                         (blur)="editing[row.id + '-claimName'] = false"
                         [value]="row.claimName" />
                </mat-form-field>
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column name="" [flexGrow]="4">
              <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
                <pre style="margin: 0px; white-space: normal; font-size: 12px;" (dblclick)="editing[row.id + '-claimValue'] = true" *ngIf="!editing[row.id + '-claimValue']">
                  {{row.claimValue}}
                </pre>
                <mat-form-field *ngIf="editing[row.id + '-claimValue']" class="datatable-input">
                  <input matInput type="text" required autofocus placeholder="Claim value"
                         (keyup.enter)="updateClaim(row.tokenType, $event, 'claimValue', row.id)"
                         (blur)="editing[row.id + '-claimValue'] = false"
                         [value]="row.claimValue" />
                </mat-form-field>
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column name="" [flexGrow]="1">
              <ng-template let-row="row" ngx-datatable-cell-template>
                <div fxLayout="row" class="gv-table-cell-actions" *ngIf="!readonly">
                  <button mat-icon-button (click)="deleteClaim(row.tokenType, row.claimName, $event)"><mat-icon>close</mat-icon></button>
                </div>
              </ng-template>
            </ngx-datatable-column>
          </ngx-datatable>
        </div>
      </div>

      <div fxLayout="row">
        <button mat-raised-button color="primary" type="submit" [disabled]="!formChanged">SAVE</button>
      </div>
    </form>
  </div>
  <div class="gv-page-description" fxFlex>
    <h3>OAuth 2.0 / OpenID Connect</h3>
    <div class="gv-page-description-content">
      <h4>Tokens</h4>
      <p>
        The ID Token is a JSON Web Token (JWT) that contains claims (user profile information) about the End-User.
      </p>
      <p>
        You must provide the OAuth 2 scope <span class="code">openid</span> in order to get the <span class="code">id_token</span> which contains the following default claims :
      </p>
      <small>
        <b><i>iss:</i></b> Issuer Identifier for the Issuer of the response.<br>
        <b><i>sub:</i></b> Subject Identifier.<br>
        <b><i>aud:</i></b> Audience(s) that this ID Token is intended for.<br>
        <b><i>exp:</i></b> Expiration time on or after which the ID Token MUST NOT be accepted for processing.<br>
        <b><i>iat:</i></b> Time at which the JWT was issued.<br>
      </small>
    </div>
  </div>
</div>
